<template>
  <div class="merchantOrderManage">
    <index-top :name="userName" :is-login="isl" />
    <el-table :data="tableNewData"
              v-loading="loading"
              :span-method="objectSpanMethod"  border style=" margin-top: 20px;margin-left: 50px;margin-right: 50px;margin-bottom: 20px" :cell-class-name="tableRowClassName" :header-cell-style="isCenter">
      <el-table-column prop="id" label="订单号" width="140" align="center" fixed> </el-table-column>
      <el-table-column label="商品信息" width="350" fixed>
        <template slot-scope="scope">
          <div class="info_box">
            <div class="info_box_img">
              <img :src="getUrl(scope.row.image)" alt="" />
<!--              <el-image-->
<!--                style="width: 80px; height: 80px"-->
<!--                :src="getUrl(scope.row.image)"-->
<!--                fit="fit"></el-image>-->
            </div>
            <div class="info_describe">
              <p class="text">
                <span>{{ scope.row.name }}</span>
              </p>

            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价(元)" align="center" width="90"> </el-table-column>
      <el-table-column prop="num" label="购买数量" align="center" width="80"> </el-table-column>
      <el-table-column prop="total_payment" label="支付金额(元)" align="center" width="140"> </el-table-column>
      <el-table-column prop="name" label="用户名称" align="center" width="110"> </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center" width="115"> </el-table-column>
      <el-table-column prop="address" label="用户地址" width="160"> </el-table-column>
      <el-table-column prop="create_time" label="下单时间" align="center" width="160"></el-table-column>
      <el-table-column label="操作" align="center" width="140">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
<!--    <el-pagination-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="queryInfo.pagenum"-->
<!--      :page-sizes="[5, 10, 15, 20]"-->
<!--      :page-size="queryInfo.pagesize"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total"-->
<!--      background-->
<!--    >-->
<!--    </el-pagination>-->

    <foot style="margin-top: 20px"/>
  </div>
</template>

<script>
import {delOrders, listOrders} from "../../../api/client/clientorder";
import IndexTop from "../../components/indexTop";
import {getToken} from "../../../utils/auth";
import {isLogin} from "../../../utils/request";
import Foot from "../../components/foot";
import {headUrl} from "../../../utils/common";

export default {
  name: 'allOrder',
  components: {Foot, IndexTop},
  data() {
    return {
      loading:false,
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      tableNewData: [],
      hoverOrderArr: [],
      OrderIndexArr: [],
      orderList:[],
      total: 0,
      currentPage: 1, //初始页
      pagesize: 10 //每页的数据
    }
  },
  mounted() {
    this.getList()
    this.getUserName()
  },

  methods: {
    getList() {
      this.loading = true;
      listOrders().then(response => {
        this.orderList = response.rows;
        console.log(response)
        this.getNewTableData()
      });
    },
    getUserName() {
      this.userName = this.$store.state.user.name;
      if (getToken()) {
        isLogin.show = true
        this.isl = isLogin.show
      } else {
        this.isl = isLogin.show
        isLogin.show = false
      }
    },
    // 初始页currentPage
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    //表格内容居中显示
    isCenter({ row, column, rowIndex, columnIndex }) {
      return 'text-align:center'
    },
    // 获取相同编号的数组
    getOrderNumber() {
      let OrderObj = {}
      this.tableNewData.forEach((element, index) => {
        element.rowIndex = index
        if (OrderObj[element.id]) {
          OrderObj[element.id].push(index)
        } else {
          OrderObj[element.id] = []
          OrderObj[element.id].push(index)
        }
      })
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k])
        }
      }
      this.loading = false
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i]
          for (let j = 0; j < element.length; j++) {
            let item = element[j]
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                }
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    },
    tableRowClassName({ row, rowIndex }) {
      let arr = this.hoverOrderArr
      for (let i = 0; i < arr.length; i++) {
        if (rowIndex == arr[i]) {
          return 'hovered-row'
        }
      }
    },
    getNewTableData() {
      this.orderList.map((res) => {
        res.orderMeds.map((item) => {
          item.image = item.sysMedical.medImage
          item.id = res.orderId
          item.num= item.medNumber
          item.total_payment = res.price
          item.create_time = res.time
          item.name = item.sysMedical.medName
          item.phone = res.phone
          item.address = res.province+" "+res.city+" "+res.district+" "+res.address
        })
        this.tableNewData.push(res.orderMeds)
      })
      this.tableNewData = this.tableNewData.flat()
      this.getOrderNumber()
    },
    getUrl(url) {
      return headUrl + url
    },
    handleDelete(index,row){
      console.log(index)
      console.log(row)
      const orderIds = row.id;
      this.$modal.confirm('是否确认删除用户订单 编号为"' + orderIds + '"的数据项？').then(function() {
        return delOrders(orderIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
        location.reload()
      }).catch(() => {});
    }
  },
  created() {}
}
</script>
<style lang="scss" scoped>
.merchantOrderManage {
  background: #fff;
  width: 100%;
  left: 40px;
  right: 40px;
  padding: 20px;

  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  .info_box {
    display: flex;
    align-items: center;
    margin: 0 10px;
    .info_box_img {
      cursor: pointer;
      width: 50px;
      flex: 0 0 50px;
      margin-right: 6px;
      img {
        width: 50px;
        height: 50px;
      }
    }
    .info_describe {
      .text {
        margin-bottom: 6px;
      }
      .attr {
        color: #9e9e9e;
        span {
          margin-right: 6px;
        }
      }
    }
  }
}

.el-tag {
  width: 100%;
  height: 36px;
  line-height: 36px;
}
.tip-tag {
  .el-tag {
    text-align: center;
  }
}
</style>

